<extend name="Base/base" />
<block name='head'>
    <link rel="stylesheet" href="/Public/Admin/css/personal.css"/>
    <link href="/Public/Admin/css/new_plan.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/Public/Admin/css/style.css" />
    <script src="/Public/static/layer/layer.js"></script>
    <!--文件上传-->
    <script type="text/javascript" src="/Public/Cropper/js/ajaxfileupload.js" ></script>
    <style>
        body{font-size:15px}
        .textarea{height:50px;width:90%}
        .checkCont p{float:left;}
        .checkCont a{margin-left:10px;display: inline-block;}
        .fujian{margin:0;}
        .c-red{color:red}
        .power-flow .auth tbody .auth-m{text-align: left}
        .right .iconfont {font-size:24px; color:#158CEA;}
    </style>
</block>
<block name="content"> 
    <section class="layui-larry-box">
        <div class="larry-personal">
            <div class="layui-tab">
                <p class="nav-title" style="height:38px;line-height: 38px">
                    <!--<a class="newsAdd_btn" title="返回" href="javascript:history.go(-1)"><img src="/Public/Admin/images/back.png" /></a>-->
                    <span style="float:left;display:inline-block">
                        <a href="{:U('Flow/index')}"><span>工作流程</span></a> &nbsp;> &nbsp;设计流程
                    </span>
                    <span style="float:right;display:inline-block;text-indent: 0;">
                        <a href="{:U('newFlow')}" class="layui-btn search_btn">新建流程</a>
                    </span>
                </p>

                <div class="cont">
                    <div class="left">
                        <!--                        <a class="pointer flowType flowNav-first active" data-id="0"><p><img src="/Public/Admin/images/flow0.png" />常用工作</p></a>-->
                        <foreach name="flowCates" item="type" key="key">
                            <div class="l-cate">
                                <a class="pointer flowCate flowNav" data-id="{$type.sort_id}"><p><img src="/Public/Admin/images/flow{$key+1}.png" />{$type.sort_name}</p></a>
                                <div class="cateChild" style="display:none">
                                    <foreach name="type.child" item="child">
                                        <a class="pointer flowNav flowDesign" data-flowId="{$child.flow_id}" data-flowname="{$child.flow_name}"><i class="iconfont icon1">&#x{$child.icon};</i> {$child.flow_name}</a>
                                    </foreach>
                                </div>
                            </div>
                        </foreach>
                        <input type="hidden" class="flowDesignUrl" value="{:U('getDesignCont')}">
                        <input type="hidden" class="flowPrivUrl" value="{:U('getFlowPriv')}">
                    </div>
                    <div class="right" style="display:inline-block">
                        <div class="r-cont" style="padding-left:5%">
                            <div class="r-cont-l">
                                <img src="/Public/Admin/images/flow_name.png">
                            </div>
                            <div class="r-cont-r" style="">
                                <div>
                                    <p style="">
                                        <img src="/Public/Admin/images/first.png">
                                        <span style="color:#1E9FFF;font-size: 16px;font-weight: bold">定义流程基本属性</span>
                                    </p>
                                    <ul>
                                        <li><span>用于定义流程的基本属性,工作名称和文号,流程说明,扩展字段。 可配置内容包括:流程名称,表单,流程类型等。</span></li>
                                        <li>
                                            <span class="red">注:</span>
                                            <span class="green">1.有流程发起之后表单类型和流程类型不可更换。 2.只有自由委托才允许定义委托规则，委托后更新自己步骤为办理完毕，主办人变为经办人。</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <p class="clear"></p>
                        <div class="r-cont" style="padding-left:5%">
                            <div class="r-cont-l">
                                <img src="/Public/Admin/images/flow_step.png">
                            </div>
                            <div class="r-cont-r" style="">
                                <div>
                                    <p style="">
                                        <img src="/Public/Admin/images/second.png">
                                        <span style="color:#1E9FFF;font-size: 16px;font-weight: bold">设计流程步骤</span>
                                    </p>
                                    <ul>
                                        <li><span>用于设计流程在实际应用中的模型。 可配置内容包括:步骤基本属性,经办权限,字段权限,条件设置等。</span></li>
                                        <li>
                                            <span class="red">注:</span>
                                            <span class="green">序号必须为数字，流程的开始步骤序号必须为1。</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <p class="clear"></p>
                        <div class="r-cont" style="padding-left:5%">
                            <div class="r-cont-l">
                                <img src="/Public/Admin/images/flow_purview.png">
                            </div>
                            <div class="r-cont-r" style="">
                                <div>
                                    <p style="">
                                        <img src="/Public/Admin/images/third.png">
                                        <span style="color:#1E9FFF;font-size: 16px;font-weight: bold">新建流程管理权限说明</span>
                                    </p>
                                    <ul>
                                        <li><span>用于管理流程在实际应用中的相关权限。 权限类型包括:管理 ,监控 ,查询 ,编辑 ,点评 。</span></li>
                                        <li>
                                            <span class="red">注:</span>
                                            <span class="green">如果不是从业务引擎发起的工作，授权范围（人员）（部门）（角色）至少要先选择其中的一项。</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <p class="clear"></p>
                    </div>

                    <div class="designCont" style="display:none">
                        <p class="flow-name">
                            <span class="left">公文发送</span><input type="hidden" id="flow_id" value="0" />
                            <!--<span class="n-right">该流程下共有 33 个工作，其中 19 个已删除</span>-->
                        </p>
                        <p class="clear"></p>
                        <ul class="dr-cont">
                            <li class="guide-flow">
                                <p class="title" style=""><img src="/Public/Admin/images/down.png"> 设计流程</p>
                                <div class="guide" style="padding-left:50px;">
                                    <div class="block">
                                        <img src="/Public/Admin/images/flow_1.png" />
                                        <a class="pointer newFlow" href="{:U('newFlow')}" data-url="{:U('newFlow')}"><div>
                                                <h4 style="margin:10px;font-weight: bold">定义流程属性</h4>
                                                <p style="color:#008ae7">定义流程名称、流程类型、文号、流程说明等流程基本信息 </p>
                                            </div></a>
                                    </div>
                                    <div class="block">
                                        <img src="/Public/Admin/images/flow_2.png" />
                                        <a class="pointer flowStep" href="#" data-url="{:U('flowStep')}"><div>
                                                <h4 style="margin:10px;font-weight: bold">设计流程步骤</h4>
                                                <p style="color:#37AEFF">设计流程各步骤、经办权限、可写、必填和保密字段设置、转入转出条件设置。</p>
                                            </div></a>
                                    </div>
                                    <div class="block">
                                        <img src="/Public/Admin/images/flow_3.png" />
                                        <a class="pointer flowView" data-formid="{$form_id}"><div>
                                                <h4 style="margin:10px;font-weight: bold">预览表单</h4>
                                                <p style="color:#73BD42">查看表单样式</p>
                                            </div></a>
                                    </div>
                                    <div class="block">
                                        <img src="/Public/Admin/images/flow_4.png" style="border:1px solid #EF8400;padding:8px;border-radius: 5px"/>
                                        <a class="pointer flowHide" data-url="{:U('flowHide')}"><div>
                                                <h4 style="margin:10px;font-weight: bold">隐藏流程</h4>
                                                <p style="color:#EF8400">隐藏后流程分类中不再显示，无法创建该流程（可在隐藏流程列表中恢复或彻底删除） </p>
                                            </div></a>
                                    </div>
                                </div>
                                <p class="clear"></p>
                            </li>
                            <li class="power-flow">
                                <p class="title" style=""><img src="/Public/Admin/images/right.png"> 管理权限</p>
                                <div class="guide" style="padding:10px;display:none">
                                    <div class="bth">
                                        <a class="pointer addFlowPriv" data-id="">新建</a>
                                    </div>
                                    <table class="auth">
                                        <thead>
                                            <tr>
                                                <th>权限类型</th>
                                                <th>授权范围</th>
                                                <th>管理范围</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>全部</td>
                                                <td class="auth-m">
                                                    <p><b>角色：</b>公文专员</p>
                                                    <p><b>角色：</b>公文专员</p>
                                                </td>
                                                <td>所有部门</td>
                                                <td>
                                                    <a class="pointer editFlowPriv">修改</a>
                                                    <a class="pointer delFlowPriv">删除</a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <p class="clear"></p>
                                <input type="hidden" id="delFlowPrivUrl" value="{:U(delFlowPriv)}">
                            </li>
                            <li class="delete-flow" style="display:none">
                                <p class="title" style=""><img src="/Public/Admin/images/right.png"> 其他功能</p>
                                <div class="guide" style="padding-left:50px;">
                                    <div class="block">
                                        <img src="/Public/Admin/images/flow-show.png" style="border:1px solid #1E9FFF;padding:8px;border-radius: 5px"/>
                                        <a class="pointer flowShow" data-url="{:U('flowShow')}"><div>
                                                <h4 style="margin:10px;font-weight: bold">显示流程</h4>
                                                <p style="color:#1E9FFF">将隐藏的流程重新启用 </p>
                                            </div></a>
                                    </div>
                                    <div class="block">
                                        <img src="/Public/Admin/images/del-flow.png" style="border:1px solid #f73c24;padding:4px;border-radius: 5px"/>
                                        <a class="pointer flowDelete" data-url="{:U('flowDelete')}"><div>
                                                <h4 style="margin:10px;font-weight: bold">删除流程</h4>
                                                <p style="color:#f73c24">删除该流程及相关的所有数据，包括之前创建流程的所有数据，此步骤不可恢复，请谨慎操作！！！ </p>
                                            </div></a>
                                    </div>
                                </div>
                                <p class="clear"></p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <input type='hidden' id="getFlowName" value="{:U('getFlowName')}">
    </section>
</block>
<block name="script">
    <script type="text/javascript" src="/Public/Admin/js/flow.js"></script>
    <script type="text/javascript">
        $(initFlowType());

    </script>    
</block>
